<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <div class="zy">
      <div class="left">
        <van-icon name="service" />
        <span>
          <b>快速提问</b>
          <h5>智能匹配医生</h5>
        </span>
      </div>
      <div class="right">
        <van-icon name="manager-o" />
        <span>
          <b>开药门市</b>
          <h5>快速开方 送药上门</h5>
        </span>
      </div>
    </div>
    <van-grid>
      <van-grid-item icon="photograph" text="预约挂号" />
      <van-grid-item icon="manager" text="找医生" />
      <van-grid-item icon="youzan-shield" text="抗疫专区" />
      <van-grid-item icon="phone" text="电话问诊" />
    </van-grid>
    <van-notice-bar
      left-icon="like"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <p>
      <b>特色科室</b>
      <span>查看全部></span>
    </p>
    <div class="bing">
      <div id="left">
        <h3>18元战—男言之隐</h3>
        <span>做男人 更持久</span>
        <button>查看详情></button>
      </div>
      <div id="right">
        <span class="er">
          <h3>儿童常见疾病</h3>
          <p>每到换季宝宝必备</p>
        </span>
        <span class="dou">
          <h3>名医美肤祛痘</h3>
          <p>减肥/术后/慢病/营养品</p>
        </span>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  
}
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .zy{
    width: 100%;
    padding: 15px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left,.right{
      width: 45%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: chartreuse;
      padding: 10px 0;
      color: #fff;
      .van-icon{
        font-size: 30px;
      }
      span{
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: rgb(41, 40, 40);
      }
    }
    .left{
      background: cornflowerblue;
    }
    .right{
      background: rgb(52, 206, 167);
    }
  }
  .van-grid{
    padding: -10px 0 10px 0;
    .van-grid-item{
      color: rgb(6, 178, 221);
    }
  }
  p{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    margin: 10px 0;
    span{
      font-size: 10px;
      color: #666;
    }
  }
  .bing{
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    #left{
      width: 45%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: rgb(115, 196, 243);
      border-radius: 5px;
      h3{
        margin: 10px;
      }
      span{
        margin: 10px;
        color: #666;
        font-size: 15px;
      }
      button{
        padding: 5px 10px;
        background: cornflowerblue;
        color: #fff;
        border-radius: 20px;
        border: none;
        width: 60%;
      }
    }
    #right{
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      span{
        width: 100%;
        height: 45%;
        background:  rgb(115, 196, 243);
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        h3{
          margin: 10px;
        }
        p{
          color: #666;
          font-size: 15px;
          margin: 10px;
        }
      }
    }
  }
</style>